<script lang="ts" setup>
import { computed } from 'vue'
import Button from './Button.vue'

// 接收props
const props = defineProps<{
  username: string
}>()

// 定义事件，用于与父组件通信
const emit = defineEmits<{
  logout: []
}>()

// 计算欢迎消息
const welcomeMessage = computed(() => `欢迎，${props.username}！`)

/**
 * 处理退出登录
 */
function handleLogout() {
  emit('logout')
}
</script>

<template>
  <div class="login-success">
    <h2 class="success-title">登录成功</h2>

    <!-- 欢迎信息 -->
    <div class="welcome-section">
      <div class="success-icon">✅</div>
      <p class="welcome-message">{{ welcomeMessage }}</p>
      <p class="success-desc">您已成功登录医生助手系统</p>
    </div>

    <!-- 功能区域 -->
    <div class="feature-section">
      <p class="feature-desc">您现在可以使用以下功能：</p>
      <ul class="feature-list">
        <li>查看患者信息</li>
        <li>记录诊疗记录</li>
        <li>开具处方单</li>
        <li>查看医疗数据</li>
      </ul>
    </div>

    <!-- 退出登录按钮 -->
    <Button @click="handleLogout" type="secondary" class="logout-button">
      退出登录
    </Button>
  </div>
</template>

<style scoped>
.login-success {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.success-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #059669;
  margin-bottom: 8px;
}

.welcome-section {
  padding: 16px;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.success-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.welcome-message {
  font-size: 1.1rem;
  font-weight: 600;
  color: #065f46;
  margin: 8px 0;
}

.success-desc {
  font-size: 0.9rem;
  color: #047857;
  margin: 4px 0 0 0;
}

.feature-section {
  width: 100%;
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.feature-desc {
  font-size: 0.9rem;
  color: #475569;
  margin-bottom: 8px;
  font-weight: 500;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.feature-list li {
  padding: 4px 0;
  font-size: 0.85rem;
  color: #64748b;
  position: relative;
  padding-left: 16px;
}

.feature-list li::before {
  content: "•";
  color: #3b82f6;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.logout-button {
  width: 100%;
  margin-top: 8px;
}

/* 悬停效果 */
.welcome-section:hover {
  background-color: #ecfdf5;
  transition: background-color 0.2s ease;
}

.feature-section:hover {
  background-color: #f1f5f9;
  transition: background-color 0.2s ease;
}
</style>